<template>
  <div class="hello">
    <div style="float: right;position: absolute;">
      <div v-for="color in themeColors" :key="color" class="classPicker" :style="{backgroundColor:color}" @click="colorChange(color)"></div>
    </div>
    <div style="float: right;position: absolute;top:90px">
      <div v-for="color in textColor" :key="color" class="classPicker" :style="{backgroundColor:color}" @click="colorTextChange(color)"></div>
    </div>
    <div style="float: right;position: absolute;top:120px">
      <span>边框圆角</span><button @click="setBorderRadius(borderRadius-1)" >-</button><progress :value="borderRadius" max="10"></progress><button @click="setBorderRadius(borderRadius+1)">+</button>
    </div>
    <button @click="herfToTable">切换到 Table 
    </button>
    <h1>控件演示</h1>
    <hr>
    <h2>基础组件</h2>
    <div style="position: relative; width: 150px; background-color: yellow;">
      <input type="date" class="starttime" :class="{'noValue':(!statedate)}" v-model="statedate" placeholder="请选择" style="width:100%" >
    </div>
    
    <check-box-demo></check-box-demo>
    <radio-button-demo></radio-button-demo>
    <button-demo></button-demo>
    <j-input-demo></j-input-demo>
    <JSliderDemo></JSliderDemo>
    <JContexMenuDemo></JContexMenuDemo>
    <j-select-demo></j-select-demo>
    <ScrollBarDemo></ScrollBarDemo>
    <SwitchDemo></SwitchDemo>
    <JSelectTreeDemo></JSelectTreeDemo>
    <JSelectProDemo></JSelectProDemo>
    <TimeLineDemo></TimeLineDemo>
    <hr>
    <h2>工具栏Toobar</h2>
    <ToolbarDemo></ToolbarDemo>
    <p></p>
    <ToolbarDemo style="width:100%;"></ToolbarDemo>
    <hr>
    <h2>分割面板SplitPane</h2>
    <SplitPaneDemo style="width: 100%; height: 500px;margin: 0 auto;"></SplitPaneDemo>
    <hr>
    <h2>树形控件TreeView</h2>
    <TreeViewDemo style="margin: 0 auto;width:100%;"></TreeViewDemo>
    <hr>
    <h2>Tab控件</h2>
    <JTabDemo style="width: 100%;"></JTabDemo>
    <hr>
    <h2>List控件</h2>
    <JListDemo style="width: 100%;"></JListDemo>
    <hr>
    <h2>List控件(虚拟DOM)</h2>
    <JVMListDemo style="width: 100%;"></JVMListDemo>
    <hr>
    <h2>颜色选择器</h2>
    <ColorPickerDemo></ColorPickerDemo>
    <h2>长连接进度条(需后端支持)</h2>
    <JProgressDemo></JProgressDemo>
    <hr>
    <h2>格式化表格</h2>
    <FormatTableDemo></FormatTableDemo>
    <hr>
    <div class="footer">@</div>
  </div>
</template>

<script>
import CheckBoxDemo from './Package/CheckBox/CheckBoxDemo.vue';
import RadioButtonDemo from './Package/RadioButton/RadioButtonDemo.vue';
import SplitPaneDemo from './Package/SplitPane/SplitPaneDemo.vue';
import ToolbarDemo from './Package/Toolbar/ToolbarDemo.vue';
import TreeViewDemo from './Package/TreeView/TreeViewDemo.vue';
import ButtonDemo from './Package/JButton/JButtonDemo.vue';
import JSelectDemo from './Package/JSelect/JSelectDemo.vue';
import JInputDemo from './Package/JInput/JInputDemo.vue';
import JTabDemo from './Package/JTab/JTabDemo.vue';
import JListDemo from './Package/JList/JListDemo.vue';
import JVMListDemo from './Package/JVitrualDomList/JVMListDemo.vue';
import ColorPickerDemo from './Package/ColorPicker/ColorPickerDemo.vue';
import JProgressDemo from './Package/JProgress/JProgressDemo.vue';
import FormatTableDemo from './Package/FormatTable/FormatTableDemo.vue';
import ScrollBarDemo from './Package/ScrollBar/ScrollBarDemo.vue';
import SwitchDemo from './Package/Switch/SwitchDemo.vue';
import JSelectTreeDemo from './Package/JSelectTreeView/JSelectTreeDemo.vue';
import JSelectProDemo from './Package/JSelectPro/JSelectProDemo.vue'
import TimeLineDemo from './Package/TimeLine/TimeLineDemo.vue'
import JSliderDemo from './Package/JSlider/JSliderDemo.vue';
import JContexMenuDemo from './Package/JContextMenu/JContexMenuDemo.vue';
export default {
  components: {
    SplitPaneDemo,
    ToolbarDemo,
    TreeViewDemo,
    CheckBoxDemo,
    RadioButtonDemo,
    ButtonDemo,
    JSelectDemo,
    JInputDemo,
    JTabDemo,
    JListDemo,
    ColorPickerDemo,
    JProgressDemo,
    FormatTableDemo,
    ScrollBarDemo,
    JVMListDemo,
    SwitchDemo,
    JSelectTreeDemo,
    JSelectProDemo,
    TimeLineDemo,
    JSliderDemo,
    JContexMenuDemo
  },
  name: '',
  data() {
    return {
      isVisible: true,
      statedata: '1',
      themeColors:[
        '#0078d4',
        '#00b7c3',
        '#4c4a48',
        '#e81123',
        '#ff8c00'
      ],
      textColor:[
        '#4c4a48',
        '#0078d4',
        'red',
        'green',
        'blue'
      ],
      borderRadius:2,
      statedate:null
    }
  },
  props: {
    msg: String
  },
  mounted() {
    this.$nextTick(() => {
      this.colorChange(this.themeColors[0]);
      this.colorTextChange(this.textColor[0]);
    })
  },
  methods: {
    setBorderRadius(borderRadius){
      if(borderRadius>=0 && borderRadius<=10){
        document.documentElement.style.setProperty('--theme-border-radius', borderRadius+'px');
        this.borderRadius = borderRadius;
      }
    },
    colorChange(color){
      document.documentElement.style.setProperty('--theme-primary-color', color);
      document.documentElement.style.setProperty('--theme-highlight-slim-color', color+'22');

      document.documentElement.style.setProperty('--theme-highlight-color', color+'4e');
      document.documentElement.style.setProperty('--theme-disable-color', '#b2b3b4');
    },
    colorTextChange(color){
      document.documentElement.style.setProperty('--theme-text-color', color);
    },
    herfToTable(){
      window.location.href = '/table'
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
:root{
  --theme-primary-color:#00b6c34e;
  --theme-text-color:#ff2600fe;
  --theme-obprimary-color:white;
}
</style>
<style scoped>

h2{
  color: var(--theme-text-color);
}
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
hr{
  margin: 20px 0;
}
.footer{
  margin-top:500px;
}
.classPicker{
  width: 20px;
  height: 20px;
  margin: 2px;
  display: inline-block;
  cursor: pointer;
}
.starttime{
  width: 100%;
}
.noValue::before{
  content: "请选择起始日期";
  position: absolute;
  z-index: 9999;
  left: 3px;
  top: 5px;
  border: none;
  bottom: 2px;
  background-color: white;
  right: 20px;
  color: gray;
  pointer-events: none;
  line-height: 100%;
  text-align: left;
  font-size: 10px;

}
</style>
